<template>
    <div>
        <el-card>
            <template #header>
                <div>
                    <el-form :model="formData" ref="form" label-width="80px" :inline="false">
                        <el-row :gutter="20">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="领料名称" prop="requisitionName">
                                    <el-input style="width: 350px;" v-model="formData.requisitionName"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="需求日期" prop="date">
                                    <el-date-picker style="width: 350px;" type="datetime" placeholder="选择日期"
                                        v-model="formData.requiredTime"
                                        value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :offset="0">
                                <el-form-item label="领料人">
                                    <template #default>
                                        <el-select v-model="formData.applicantId" placeholder="请选择领料人员">
                                            <el-option v-for="item in users" :key="item.username" :label="item.nickname"
                                                :value="item.username" />
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="选择计划">
                                    <el-input style="width: 350px; margin-right: 10px;" v-model="formData.planId"
                                        placeholder="请选择计划" disabled></el-input>
                                    <el-button type="primary" @click="showPlanModal">选择计划</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :offset="0">
                                <el-form-item label="选择计划">
                                    <el-input style="width: 350px; margin-right: 10px;" v-model="formData.planName"
                                        placeholder="请选择计划" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="物料清单">
                                    <el-table :data="materialList" style="width: 100%" border>
                                        <el-table-column prop="materialId" label="物料编码" />
                                        <el-table-column prop="materialName" label="物料名称" />
                                        <el-table-column prop="specificationsAndModels" label="规格型号" />
                                        <el-table-column prop="unit" label="单位" width="80" />
                                        <el-table-column prop="planQuantity" label="计划数量" />
                                        <el-table-column prop="inventoryQuantity" label="库存数量" />
                                        <el-table-column prop="actualQuantity" label="实发数量" width="180">
                                            <template #default="scope">
                                                <el-input-number v-model="scope.row.actualQuantity" :min="0"
                                                    :max="scope.row.inventoryQuantity==null ? 0: scope.row.inventoryQuantity" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="warehouseId" label="仓库" width="150">
                                            <template #default="scope">
                                                <el-select v-model="scope.row.warehouseId" placeholder="请选择仓库"
                                                    style="width: 100%" @change="getInventoryQuantity(scope.row)">
                                                    <el-option v-for="item in warehouseOptions" :key="item.warehouseId"
                                                        :label="item.warehouseName"
                                                        :value="item.warehouseId"></el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item>
                            <el-button type="primary" @click="submitForm">立即创建</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <el-dialog v-model="orderDialogVisible" title="选择计划">
                <el-table :data="plans" style="width: 100%;">
                    <el-table-column label="计划编号" prop="planId" />
                    <el-table-column label="计划名称" prop="planName" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button @click="selectPlan(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
            <!-- card body -->
        </el-card>


    </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';
import { useRouter } from 'vue-router'
import request from '@/api/request.js'


let router = useRouter()

let emits = defineEmits(['ref-table'])

let formData = ref({})//表单数据

const users = ref([])
onMounted(async () => {
    request.post('/system/user/list', { size: 1000 }).then(res => {
        users.value = res.data.records
    })
    request({
        url: '/warehouse/tree',
        method: 'get'
    }).then(res => {
        console.log(res.data)
        warehouseOptions.value = res.data
    })
})

//点击仓库获取库存数量
let getInventoryQuantity = (row) => {
    console.log(row.warehouseId)
    console.log(row.materialId);
    
    request({
        url:'/inventory_s/trees',
        method:'get',
        params:{
            warehouseId:row.warehouseId,
            materialId:row.materialId
        }
    }).then(res=>{
        console.log(res);
        
        if(res.data.records.length!=0){
            if(res.data.records[0].quantity!=null&& res.data.records[0].quantity>=0){
                row.inventoryQuantity = res.data.records[0].quantity
            }
        }
        else{
            row.inventoryQuantity=0
        }
        
        console.log(row.inventoryQuantity)
    })
}

// 仓库选项
const warehouseOptions = ref([])


let plans = ref([])//计划列表

let orderDialogVisible = ref(false)//计划弹窗是否显示



let showPlanModal = () => {
    request({
        url: '/production/plan/page',
        method: 'get',
        params: {
            page: 1,
            size: 100
        }
    }).then(res => {

        plans.value = res.data.records
        orderDialogVisible.value = true
        console.log(plans.value);
    })

}//显示计划弹窗



let materialList = ref([]) // 物料列表

let selectPlan = async (plan) => {
    //选择计划
    formData.value.planId = plan.planId
    formData.value.planName = plan.planName
    formData.value.salesOrderId = plan.salesOrderId
    orderDialogVisible.value = false

    // 根据产品ID加载物料信息
    await loadMaterialList(plan.planId)
}
// 根据产品ID加载物料清单
let loadMaterialList = async (planId) => {

    request({
        url: "/production/plan/getByPlanId",
        method: "get",
        params: { planId: planId }
    }).then(res => {
        console.log(res.data);

        //获取到产品ID
        let planData = res.data[0]
        console.log(planData)
        //根据产品ID获取物料清单
        request({
            url: "/bom/selectBom",
            method: "get",
            params: { materialId: planData.productId }
        }).then(res => {
            console.log(res.data);
            //获取到物料清单
            let bomData = res.data
            console.log(bomData)
            //根据物料清单获取物料信息
            materialList.value = bomData.map(item => {
                return {
                    materialId: item.bomId,
                    materialName: item.materialName,
                    specificationsAndModels: item.specificationsAndModels,
                    unit: item.unit,
                    planQuantity: item.materialRatio * planData.planQuantity,
                    actualQuantity: 0,
                }
            })
            console.log(materialList.value)
        })

    })
}



let submitForm = () => {
    //处理物料数据
    formData.value.materialRequisitionDetails = materialList.value
    //提交表单
    request({
        url: "/material-requisition/add",
        method: "post",
        data: formData.value
    }).then(res => {
        console.log(formData.value);
        emits("ref-table")
    })
}
</script>

<style scoped></style>
